import React, { memo } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import {
  DetailNavWrapper
} from './style'
import {
  formatImg
} from '@/utils/format'
import OperationBar from '@/components/operation-bar'
export default memo(function DetailNav() {
  const { currentToplistDetail } = useSelector(state => ({
    currentToplistDetail:state.getIn(['toplist','currentToplistDetail'])
  }),shallowEqual)
  return (
    <DetailNavWrapper>
      <div className="left">
        <div className="mask sprite_covor"></div>
        <img src={formatImg(currentToplistDetail.coverImgUrl,150)} alt="" />
      </div>
      <div className="right">
        <h2 className='title'> {currentToplistDetail.name}</h2>
        <div className='operation'>
          <OperationBar favorCount={`(${currentToplistDetail.subscribedCount})`}
            shareCount={`(${currentToplistDetail.shareCount})`}
            downloadCount="下载"
            commentCount={`(${currentToplistDetail.commentCount})`}
          />
        </div>
      </div>
    </DetailNavWrapper>
  )
})
